import { Table, Modal, Row, Col, Button, InputNumber } from 'antd';
import React, { useState, useEffect } from 'react';
import common from '../../common';
const columns = [
  {
    title: '账期',
    dataIndex: 'summaryData',
    key: 'summaryData',
  },
  {
    title: '累计借款金额',
    dataIndex: 'borrowSummary',
    key: 'borrowSummary',
  },
  {
    title: '累计贷款金额',
    dataIndex: 'loanSummary',
    key: 'loanSummary',
  },
  {
    title: '借-贷',
    dataIndex: 'l1',
    key: 'l1',
  },
  {
    title: '贷-借',
    dataIndex: 'l2',
    key: 'l2',
  },
];
const eventHandler = {
  save: 'subjectSummary-save',
};
export default props => {
  const [isEdit, setIsEdit] = useState(false);

  const [firstAmount, setFirstAmount] = useState({
    earlyStage: 0,
    borrowSummary: 0,
    loanSummary: 0,
    subjectCode: props.hoverData.subjectCode,
    summaryData: '',
  });
  const notFirst = props.hoverData.subjectSummaries.filter((value, index) => {
    return value.summaryData !== '';
  });
  useEffect(() => {
    const firstAmountList = props.hoverData.subjectSummaries.filter(
      (value, index) => {
        return value.summaryData === '';
      },
    );
    if (firstAmountList && firstAmountList.length > 0) {
      setFirstAmount({
        earlyStage: firstAmountList[0].earlyStage,
        borrowSummary: firstAmountList[0].borrowSummary,
        loanSummary: firstAmountList[0].loanSummary,
      });
    }
  }, []);
  return (
    <div>
      <Modal
        title="账期数据"
        onCancel={props.onCancel}
        visible={props.visible}
        footer={null}
        width={'700px'}
      >
        <Row style={{ marginBottom: '10px' }} gutter={16}>
          <Col span={8} style={{ lineHeight: '30px' }}>
            期初金额：
            {isEdit ? (
              <InputNumber
                onChange={value => {
                  setFirstAmount({
                    ...firstAmount,
                    earlyStage: value,
                  });
                }}
                defaultValue={firstAmount.earlyStage}
              />
            ) : (
              firstAmount.earlyStage
            )}
          </Col>
          <Col span={8} style={{ lineHeight: '30px' }}>
            借方累计：
            {isEdit ? (
              <InputNumber
                onChange={value => {
                  setFirstAmount({
                    ...firstAmount,
                    borrowSummary: value,
                  });
                }}
                defaultValue={firstAmount.borrowSummary}
              />
            ) : (
              firstAmount.borrowSummary
            )}
          </Col>
          <Col span={8} style={{ lineHeight: '30px' }}>
            贷方累计：
            {isEdit ? (
              <InputNumber
                onChange={value => {
                  setFirstAmount({
                    ...firstAmount,
                    loanSummary: value,
                  });
                }}
                defaultValue={firstAmount.loanSummary}
              />
            ) : (
              firstAmount.loanSummary
            )}
          </Col>
        </Row>
        <Row gutter={16} style={{ marginTop: '10px', marginBottom: '10px' }}>
          <Col>
            <Button
              onClick={() => {
                if (isEdit) {
                  common.commonEvent(
                    eventHandler.save,
                    value => {
                      console.log(value);
                      setIsEdit(!isEdit);
                    },
                    firstAmount,
                  );
                } else {
                  setIsEdit(!isEdit);
                }
              }}
              type={'primary'}
            >
              设置期初金额
            </Button>
          </Col>
          <Col>
            <Button type={'primary'}>刷新账期数据</Button>
          </Col>
        </Row>
        <Table size={'small'} dataSource={notFirst} columns={columns} />
      </Modal>
    </div>
  );
};
